<template>
      
 	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>订单管理</h3>
			<h4>所有订单</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="order-nav clearfix layui-form">
				<dl ><input type="text" name="order_id"  placeholder="输入订单号" autocomplete="off" class="layui-input"></dl>
				<dl><input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input"></dl>
				<dl>
				    <select name="staff_id" lay-filter="staff_id">
				        <option value="">选择加油员</option>
				        <option value="2">鹿程002</option>
                        <option value="5">鹿程003</option>
                        <option value="6">Dummer</option>
                        <option value="7">wht</option>
                        <option value="8">2222</option>
                        <option value="9">花花</option>
                        <option value="10">冯志琴</option>
                        <option value="11">花湖</option>
                        <option value="12">小米</option>
                        <option value="13">宋花花</option>
                        <option value="14">小米</option>
                        <option value="16">宋丽媛</option>
                        <option value="18">123000</option>
				    </select>
				</dl>
				<dl>
				    <select name="order1" lay-filter="order1">
				        <option value="">选择支付方式</option>
                        <option value="1">微信支付</option>
                        <option value="2">余额支付</option>
				    </select>
				</dl>
				<dl style="width: 320px"><input name="search_time" placeholder="请输入查询时间" class="layui-input search_time" autocomplete="off"></dl>
            	<div class="order-nav-search">
            		<dl class="deer-btn" id="submint">查询</dl>
            		<dl class="deer-btn" id="export">数据导出</dl>
            	</div>
			</div>
			<section class="order-table">
				
				<table class="layui-table" lay-skin="line">
				  <thead>
				    <tr>
				      <th>订单号</th>
				      <th>用户名</th>
				      <th>加油员</th>
				      <th>原价(元)</th>
				      <th>实际支付(元)</th>
				      <th>是否支付</th>
				      <th>支付方式</th>
				      <th>订单创建时间</th>
				      <th>订单详情</th>
				    </tr> 
				  </thead>
				  <tbody>
				    <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><dl>已支付</dl></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td><a class="order-table-a">查看详情</a></td>
				    </tr>
				     <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><span>未支付</span></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td><a class="order-table-a">查看详情</a></td>
				    </tr>
				    <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><dl>已支付</dl></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td class="order-table-a"><a>查看详情</a></td>
				    </tr>
				     <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><span>未支付</span></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td><a class="order-table-a">查看详情</a></td>
				    </tr>
				    <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><dl>已支付</dl></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td class="order-table-a"><a>查看详情</a></td>
				    </tr>
				    <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><dl>已支付</dl></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td class="order-table-a"><a>查看详情</a></td>
				    </tr>
				    <tr>
				    	<td>1166</td>
				    	<td>黄金清纯小王子</td>
				    	<td>鹿程003</td>
				    	<td>5000</td>
				    	<td>4761.9</td>
				    	<td><span>未支付</span></td>
				    	<td>微信支付</td>
				    	<td>2018-01-29 14:51:26</td>
				    	<td class="order-table-a"><a>查看详情</a></td>
				    </tr>
				  </tbody>
				</table>
				<div class="order-table-footer clearfix">
					<div class="order-table-num">
						<code>共 1165 条数据</code><br />
						<code>当前查询总升数62569.37升</code>
						<code>当前查询消费总价264915.99元 </code><br />
						<code>当前查询消费实际支付8543.04元 </code>
						<code>总优惠272744.45元</code>
					</div>
					<div class="order-table-page">
						<div id="demo3">
							
						</div>
					</div>
				</div>
				<!-- <index-info></index-info> -->
			</section>
		</div>
		<!--deer-content-->
	</section>


</template>
<script>

	import indexInfo from '@/components/service/user/index-info'

	

	export default {
		mounted:function () {
			this.$nextTick(function () {
				this.layuiState()
			})
		},
		created:function () {
			
		},
		components:{
			indexInfo
		},
		methods:{
			layuiState(){


				layui.use(['form','laypage','laydate','jquery'],function() {
					var form=layui.form;
					var laypage=layui.laypage;
					var laydate=layui.laydate;
					var $=layui.jquery;
					var layer=layui.layer;


					form.render()
					laypage.render({
						elem: 'demo3'
						,count: 1000//data.length
						,theme: '#00cc9a'
						,prev: '«'
						,next: '»'
					})

					laydate.render({
						elem: '.search_time' //指定元素
						,type:'datetime'
						,range: '/'
					})
					$('.order-table-a').bind('click',function(){
						layer.open({
							title:"订单详情",
							shadeClose: true,
							type: 2,
							offset: ['150px', '25%'],
							area: ['50%', '700px'],
							content:'/#/service/user/index/info'
						})
					})
					
				})






			}
		}

			
	}

</script>
<style>

</style>
